/**
 *
 * @authors 前端小灰狼
 * @date    2020-12-10 16:48:28
 * @version v1.0
 * @description the core js of todolist project
 *
 * ━━━━━━神兽出没━━━━━━
 * 　　   ┏┓　 ┏┓
 * 　┏━━━━┛┻━━━┛┻━━━┓
 * 　┃              ┃
 * 　┃       ━　    ┃
 * 　┃　  ┳┛ 　┗┳   ┃
 * 　┃              ┃
 * 　┃       ┻　    ┃
 * 　┃              ┃
 * 　┗━━━┓      ┏━━━┛ Code is far away from bugs with the animal protecting.
 *       ┃      ┃     神兽保佑,代码无bug。
 *       ┃      ┃
 *       ┃      ┗━━━┓
 *       ┃      　　┣┓
 *       ┃      　　┏┛
 *       ┗━┓┓┏━━┳┓┏━┛
 *     　  ┃┫┫　┃┫┫
 *     　  ┗┻┛　┗┻┛
 *
 * ━━━━━━感觉萌萌哒━━━━━━
 */

// 请根据考试说明文档中列出的需求进行作答
// 预祝各位顺利通过本次考试，see you next week！
// ...
//获取文本框
const title = document.querySelector('#title')
console.log(title)
//获取ol
const todolist = document.querySelector('#todolist')
console.log(todolist)
title.onkeydown = function(e){
    console.log(e)
    //兼容
    const keycode = e.keyCode || e.which
    // 回车：13
    if(keycode === 13){          
        //创建li
        const li = document.createElement('li')
        todolist.appendChild(li)
        //创建input
        const input = document.createElement('input')
        input.type = 'checkbox'
        li.appendChild(input)
        //创建p
        const p = document.createElement('p')
        p.innerText = this.value;
        li.appendChild(p)
        //创建a
        const del = document.createElement('a')
        del.innerText = '-'
        li.appendChild(del)
        this.value = ''
        count()
    }
}
//获取ul
const donelist = document.querySelector('#donelist')
//点击事件 事件委托
click(todolist,donelist)
click(donelist,todolist)
function click(ele,targetNode){
    ele.onclick = function(e){
        if(e.target.tagName === 'INPUT' && e.target.getAttribute('type') === 'checkbox'){
            targetNode.appendChild(e.target.parentElement)
            count()
        }else 
        
        if(e.target.tagName === 'P'){
            const str = '<input type="text" value="'+e.target.innerText+'">'
            e.target.innerHTML = str
            e.target.firstElementChild.onblur = function(){
                e.target.innerText = this.value
            }
        }else 
        
        if(e.target.tagName === 'A'){
            e.target.parentElement.parentElement.removeChild(e.target.parentElement)
            count()
            
        }
        
    }
}
function count(){
    document.querySelector('#todocount').innerText = todolist.children.length
    document.querySelector('#donecount').innerText = donelist.children.length
}